<extend name="Public:common" />

<block name="main">
    <form action="{:U('sort')}" id="j_custom_form" class=" col-md-8 form-validate" method="post" url="{:U('index')}" target="navTabAjaxDone" noEnter>
     
       
       
       
    
					<div class="col-md-2 sort_btn float-left">
					<button class="top btn medium bg-green" type="button"><span class="button-content">第 一</span></button>
					<button class="up  btn medium bg-green" style="margin-top:10px;" type="button"><span class="button-content">上 移</span></button>
					<button class="down  btn medium bg-green" style="margin-top:10px;" type="button"><span class="button-content">下 移</span></button>
					<button class="bottom  btn medium bg-green" style="margin-top:10px;" type="button"><span class="button-content">最 后</span></button>
				</div>
				
					<div id="sortoption" class="col-md-6 float-left">
					<input type="hidden" name="ids">
					<select value="" size="15">
						<volist name="list" id="vo">
							<option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
						</volist>
					</select>
					</div>
			  <div class="actionBar clear">
		<div class="form-input mrg20B text-left">
           <button type="submit" class="btn medium bg-blue xubox_yes">保存</button>
           <button type="button" url="{:U('index')}" class="btn-close btn medium bg-red mrg15L">取消</button>
       </div>    
		</div>	
 
    </form>


	<script type="text/javascript">
		$(function(){

			
			
			sort();
			$(".top").click(function(){
				rest();
				$("#sortoption").find("option:selected").prependTo("select");
				sort();
			})
			$(".bottom").click(function(){
				rest();
				$("#sortoption").find("option:selected").appendTo("select");
				sort();
			})
			$(".up").click(function(){
				rest();
				$("#sortoption").find("option:selected").after($("#sortoption").find("option:selected").prev());
				sort();
			})
			$(".down").click(function(){
				rest();
				//alert($(selected).html());
				//alert(selected.length);
				$("#sortoption").find('option:selected').before($("#sortoption").find('option:selected').next());
				sort();
				
				
			})
			
			function sort(){
				
				$("#sortoption").find('option').text(function(){
					//alert($(this).text());
					return ($(this).index()+1)+'.'+$(this).text()
				});
				var arr = new Array();
				$("#sortoption").find('.ids').each(function(){
					arr.push($(this).val());
				});
				$("#sortoption").find('input[name=ids]').val(arr.join(','));
			}

			//重置所有option文字。
			function rest(){
				
				
				$("#sortoption").find('option').text(function(){
					//alert($(this).text());
					return $(this).text().split('.')[1]
				});
			}

		});	
			
			
		
	</script>
</block>